<template>
  <div class="container" ref="person">
    <div class="person">
      <div class="header">
        <div class="top">
          <p>个人中心</p>
          <div class="datum">
            <img src="../../components/pages/image/banner/e93405ea79128df2379f3ee4ec6b0106.jpg" alt="">
            <router-link class="feature" to="./success">
              <span>登录/</span>
              <span>注册</span>
            </router-link>
          </div>
        </div>
        <div class="title">
          <ul v-for="(val, key) in feature" :key="key">
            <li>{{val.num}}</li>
            <li>{{val.title}}</li>
          </ul>
        </div>
      </div>
      <div class="order">
        <div class="order-header">
          <div class="order-top" v-for="(val, key) in top" :key="key">
            <img :src="val.img" alt="">
            <p>{{val.title}}</p>
          </div>
        </div>
        <div class="order-footer">
          <router-link :to="val.to" class="order-sole" v-for="(val, key) in foot" :key="key">
            <img :src="val.img" alt="">
            <p>{{val.title}}</p>
          </router-link>
        </div>
      </div>
      <div class="foot">
        <div class="foot-title">
          <span></span>
          <span></span>
          <p>猜你喜欢</p>
        </div>
        <div class="foot-articles">
          <div class="foot-article">
            <img class="foot-picture " src="../../components/pages/image/icons/M2.SS2_400x400.jpg" alt="">
            <div class="foot-goods">
              <img src="../../components/pages/image/banner/name.png" alt="">
              <span>2人团·已拼1.7万件</span>
            </div>
            <p>【拼品牌】 太太乐 软毛扫把簸箕套装扫地苕...</p>
            <div class="foot-sole">
              <span>￥16.6</span>
              <span>￥29.9</span>
            </div>
            <p class="foot-click">拼</p>
          </div>

          <div class="foot-article">
            <img class="foot-picture " src="../../components/pages/image/icons/M2.SS2_400x400.jpg" alt="">
            <div class="foot-goods">
              <img src="../../components/pages/image/banner/name.png" alt="">
              <span>2人团·已拼1.7万件</span>
            </div>
            <p>【拼品牌】 太太乐 软毛扫把簸箕套装扫地苕...</p>
            <div class="foot-sole">
              <span>￥16.6</span>
              <span>￥29.9</span>
            </div>
            <p class="foot-click">拼</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'person',
  data () {
    return {
      feature: [
        {num: 0, title: '我的关注'},
        {num: 0, title: '签到礼金'},
        {num: 0, title: '优惠券'}
      ],
      top: [
        {img: require('../../components/pages/image/banner/payment.png'), title: '待付款'},
        {img: require('../../components/pages/image/banner/receiving.png'), title: '待收货'},
        {img: require('../../components/pages/image/banner/accomplish.png'), title: '已完成'},
        {img: require('../../components/pages/image/banner/orders.png'), title: '全部订单'}
      ],
      foot: [
        {img: require('../../components/pages/image/icons/155745633201413553.png'), title: '砍价团', to: ''},
        {img: require('../../components/pages/image/icons/155745620576685615.png'), title: '新人红包', to: ''},
        {img: require('../../components/pages/image/icons/155745620576685615.png'), title: '一元邀新', to: ''},
        {img: require('../../components/pages/image/icons/site.png'), title: '收货地址', to: '/site'}
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      let person = this.$refs.person
      let scroll = new BScroll(person, {
        click: true,
        scrollY: true,
        bounce: false
      })
      return scroll
    })
  }
}
</script>

<style scoped lang="scss">
  .container{
    width: 100vw;
    height: 100vh;
    .person{
      li{
        list-style-type: none;
      }
      width: 100vw;
      height: 115vh;
      .header{
        width: 100vw;
        height: 645px;
        position: relative;
        .top{
          width: 100vw;
          height: 540px;
          background: #eb4f3f;
          p{
            text-align: center;
            padding-top: 90px;
            color: #ffffff;
            font-size: 54px;
          }
          .datum{
            height: 182px;
            margin-top: 68px;
            display: flex;
            padding-left: 50px;
            box-sizing: border-box;
            img{
              width: 182px;
              height: 182px;
              border-radius: 50%;
            }
            .feature{
              width: 258px;
              line-height: 60px;
              height: 72px;
              border: solid 1px #ffffff;
              border-radius: 50px;
              display: inline-block;
              text-align: center;
              margin: 50px 0 0 75px;
              color: #ffffff;
              text-decoration: none;
              span{
                font-size: 36px;
              }
            }
          }
        }
        .title{
          width: 1164px;
          height: 215px;
          position: absolute;
          top: 440px;
          left: 40px;
          background: #ffffff;
          border-radius: 30px;
          display: flex;
          ul{
            width: 388px;
            height: 215px;
            text-align: center;
            padding-top: 32px;
            box-sizing: border-box;
            li{
              line-height: 75px;
            }
            li:nth-child(1){
              font-size: 47px;

            }
            li:nth-child(2){
              font-size: 37px;
            }
          }
        }
      }
      .order{
        width: 1164px;
        height: 560px;
        margin-left: 40px;
        font-size: 0;
        .order-header, .order-footer{
          display: inline-block;
          width: 1164px;
          height: 262px;
          background: #ffffff;
          border-radius: 30px;
        }
        .order-header, .order-footer{
          margin-top: 40px;
          display: flex;
          .order-top{
            width: 291px;
            height: 262px;
            img{
              width: 80px;
              height: 80px;
              margin: 50px 0 0 100px;
            }
            p{
              font-size: 40px;
              line-height: 140px;
              text-align: center;
            }
          }
        }
        .order-footer{
          .order-sole{
            width: 291px;
            height: 262px;
            text-decoration: none;
            img{
              width: 120px;
              height: 120px;
              margin: 40px 0 0 88px;
            }
            p{
              font-size: 40px;
              line-height: 100px;
              text-align: center;
              color: #000;
            }
          }
        }
      }
      .foot{
        width: 100vw;
        overflow: hidden;
        .foot-title{
          height: 152px;
          position: relative;
          span{
            width: 330px;
            height: 1px;
            border-bottom: solid 5px #dddddd;
          }
          span:nth-child(1){
            position: absolute;
            left: 160px;
            top: 70px;
          }
          span:nth-child(2){
            position: absolute;
            left: 748px;
            top: 70px;
          }
          p{
            text-align: center;
            font-size: 45px;
            line-height: 150px;
          }
        }
        .foot-articles{
          height: 900px;
          margin: 0 48px 0 35px;
          display: flex;
          .foot-article{
            width: 572px;
            height: 850px;
            background: #ffffff;
            margin-right: 20px;
            padding: 0 40px;
            box-sizing:border-box;
            position: relative;
            .foot-picture{
              width: 490px;
              height: 490px;
              display: inline-block;
              border-radius: 20px;
              margin-top: 40px;
            }
            .foot-goods{
              width: 380px;
              height: 56px;
              background: #c39490;
              display: flex;
              position: absolute;
              left: 40px;
              top: 496px;
              img{
                width: 32px;
                height: 32px;
                padding: 12px 10px 0 10px;
              }
              span{
                font-size: 32px;
                color: #ffffff;
              }
            }
            p{
              width: 490px;
              font-size: 46px;
              margin-top: 35px;
              text-overflow: ellipsis;
            }
            .foot-sole{
              height: 42px;
              margin-top: 50px;
              span:nth-child(1){
                font-size: 42px;
                color: #ec675b;
                font-weight: bold;
              }
              span:nth-child(2){
                font-size: 30px;
                color: #cccccc;
                text-underline: black;
                text-decoration: line-through;
              }
            }
            .foot-click{
              width: 82px;
              height: 82px;
              line-height: 82px;
              background: #ec675b;
              color: #ffffff;
              font-size: 40px;
              text-align: center;
              border-radius: 20px;
              position: absolute;
              bottom: 20px;
              right: 40px;
            }
          }
        }
      }
    }
  }
</style>
